<template>
  <div class="mhg-search">
    <a-input-search v-model:value="value" placeholder="搜索" enter-button="Search" size="large" @search="onSearch"
      class="mhg-search-input" />
  </div>
</template>

<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core'
import { ref, watch } from 'vue'

const value = ref('')

const { width } = useWindowSize()

const inputWidth = ref('600px')

watch(width, (value) => {
  inputWidth.value = ((value - 300) * 0.5) + 'px'
})

function onSearch() {

  window.open(`https://bing.com/search?q=${value.value}`)

}

</script>

<style>
.mhg-search {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 5rem;
  padding-bottom: 2rem;
  background: var(--mhg-bg-1);
  overflow: hidden;
  text-align: left;
}

.mhg-search-input {
  width: v-bind(inputWidth);
  min-width: 300px;

}
</style>